<template>
  <div>
    <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" stripe :empty-text='emptyText'>
      <el-table-column type="index" label="序号" min-width="65"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="65">
        <template slot-scope="scope">
          {{scope.row.status | getOrderStatusName}}
        </template>
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" min-width="200"></el-table-column>
      <el-table-column prop="payment" label="金额" min-width="150">
        <template slot-scope="scope">
          {{scope.row.payment | formatMoney}}
        </template>
      </el-table-column>
    </el-table>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryOrderList" :queryData="orderForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
  </div>
</template>
<script>
  //  import Bus from 'src/vueBus.js';
  import PcPagination from 'components/form/pagination';

  export default {
    data () {
      return {
        orderForm: {
          status: '',
          orderCode: '',
          orderName: ''
        },
        statusOption: [{
          value: 0,
          label: '已取消'
        }, {
          value: 10,
          label: '未付款'
        }, {
          value: 20,
          label: '已付款'
        }, {
          value: 40,
          label: '已发货'
        }, {
          value: 50,
          label: '交易成功'
        }, {
          value: 60,
          label: '交易关闭'
        }],
        tableData: [],
        emptyText: '',
        currentPage: 5,
        pageUrl: {
          queryOrderList: '/omc/order/queryOrderListWithPage'
        }
      };
    },
    components: {
      PcPagination
    },
    methods: {
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn () {
        this.$refs.pcPagination.queryListWithPageFn();
      }
    }
  };
</script>
